<template>
  <div>
    <div v-if="readOnly">{{ selectInfo.title }}</div>
    <a-select
      v-else
      :value="value"
      style="width: 100%"
      :disabled="disabled"
      placeholder="请选择"
      @change="change"
    >
      <a-select-option :value="item.id" v-for="item in dictList" :key="item.id">
        <span> {{ item.title }}</span>
      </a-select-option>
    </a-select>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, ref, defineEmits, defineProps, computed, watch, onMounted } from "vue";
import { dictApi } from "@/api/dict";
const emits = defineEmits(["update:value"]);
const props = defineProps({
  value: {
    required: true,
  },
  dictId: {
    required: true,
  },
  readOnly: {
    default: false,
  },
  disabled: {
    default: false,
  },
  showTime: {
    default: false,
  },
});
const { value, dictId, readOnly, disabled } = toRefs(props);
const dictList = ref([]);
const selectInfo = computed(() => dictList.value.find((i) => i.dict_value == value));

watch(
  dictId,
  (e) => {
    if (!e) return;
    getData(e);
  },
  {
    immediate: true,
  }
);

async function getData(id) {
  const data = await dictApi.getChildren({
    id,
  });
  dictList.value = data;
}
function change(e) {
  emits("update:value", e);
}
</script>

<style lang="less" scoped></style>
